<template>
  <div class="denglu">
      <div class="form">
        
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <p class="userdenglu"> 欢迎注册 </p>
          <!-- 登陆账号 -->
           <el-form-item  prop="name">
              <el-input v-model="ruleForm.name" placeholder="请设置用户名"></el-input>
            </el-form-item>
          <!-- 请输入密码 -->
          <el-form-item  prop="pwd">
              <el-input type="password" v-model="ruleForm.pwd" placeholder="请设置登陆密码"></el-input>
            </el-form-item>
          <!-- 按钮  确认提交-->
           <el-button type="primary" round  @click="submitForm('ruleForm')" class="anniu">注册</el-button>
          </el-form>
         
        <!-- 周边的样式 -->
          <div class="yangshi1"></div>
          <div class="yangshi2"></div>
          <div class="yangshi3"></div>
          <div class="yangshi4"></div>
          <div class="yangshi5"></div>
          <div class="yangshi6"></div>
      </div>
  </div>
</template>

<script>
export default {
     data() {
      return {
        ruleForm: {
          name: '',
          pwd:''
        },
      rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pwd:  [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
   },
   methods:{
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {



            console.log(valid)
            console.log(this.ruleForm)
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
   }
}
</script>

<style lang="less" scoped>
.denglu{
  width: 100%;
  height: 100%;
  background: url('../assets/img/背景椭圆.png') no-repeat;
  background-size: cover;
  position: relative;
  .form{
    width: 902px;
    height: 610px;
    background: #fff url('../assets/img/登陆插画.png') no-repeat 78% center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .el-form{
      width: 320px;
      height: 330px;
      position: absolute;
      top: 136px;
      right: 65px;
      // background: red;
      /deep/.el-button{
        width: 320px !important;
        color: #fff !important;
        font-size: 22px;
        height: 40px !important;
        line-height: 15px !important;
        box-shadow: 0px 10px 5px #cfcfcf;
        margin-top: 25px !important;
        span{
          color: #fff !important;
        }
        
      }
      /deep/.el-form-item__content{
        margin-left: 0px !important;
      }
      /deep/.el-input__inner{
        width: 320px;
        font-size: 20px;
        background: #e6f4ff !important;
      }
      .userdenglu{
      font-size: 40px;
      color: #438afe;
      font-weight: bold;
      padding-bottom: 60px;
      
      }
    }
    .yangshi1{
      width: 86px;
      height: 34px;
      position: absolute;
      top: 52px;
      left: -42px;
      background: #fff;
      border-radius: 17px;
    }
    .yangshi2{
      width: 32px;
      height: 20px;
      position: absolute;
      top: 86px;
      left: -10px;
      background: #8ecff0;
      // z-index: 99;
      border-radius: 17px;
    }
    .yangshi3{
      width: 86px;
      height: 34px;
      position: absolute;
      top: 105px;
      left: -25px;
      background: #fff;
      border-radius: 17px;
    }
    .yangshi4{
      width: 86px;
      height: 34px;
      position: absolute;
      bottom: 52px;
      right: -42px;
      background: #fff;
      border-radius: 17px;
    }
    .yangshi5{
      width: 32px;
      height: 20px;
      position: absolute;
      bottom: 86px;
      right: -10px;
      background: #2dcfd6;
      border-radius: 17px;
    }
    .yangshi6{
      width: 86px;
      height: 34px;
      position: absolute;
      bottom: 105px;
      right: -25px;
      background: #fff;
      border-radius: 17px;
    }
  }
}

</style>